<!-- 头部 -->
<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-1 ml-5"><ElemeFilled /></el-icon>
      智慧模型
    </span>
    <!-- 展开缩放图标 -->
    <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
      <fold v-if="$store.state.asideWidth == '250px'" />
      <expand v-else />
    </el-icon>
    <!-- 刷新 -->
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
    </el-tooltip>
    <div class="ml-auto flex items-center">
      <!-- 全屏 -->
      <el-tooltip
        effect="dark"
        content="全屏"
        placement="bottom"
        v-if="!isFullscreen"
      >
        <el-icon class="icon-btn" @click="toggle">
          <fullScreen />
        </el-icon>
      </el-tooltip>
      <!-- 退出全屏 -->
      <el-tooltip effect="dark" content="退出全屏" placement="bottom" v-else>
        <el-icon class="icon-btn" @click="toggle">
          <aim />
        </el-icon>
      </el-tooltip>

      <el-dropdown class="dropdown" @command="hadleCommand">
        <span class="flex items-center text-light-50">
          <!-- 头像 -->
          <!-- <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" /> -->
          <el-avatar class="mr-2" :size="25" :icon="User" />
          <!-- 昵称 -->
          {{ $store.state.user.data.account }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <!-- <el-drawer
    v-model="showDrawer"
    title="修改密码"
    size="45%"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      label-width="80px"
      size="small"
    >
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input
          v-model="form.oldpassword"
          type="password"
          placeholder="请输入旧密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="新密码">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input
          v-model="form.repassword"
          type="password"
          placeholder="请再次输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer> -->
  <form-drawer
    ref="formDrawerRef"
    title="修改密码"
    destroyOnClose
    @submit="onSubmit"
  >
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      label-width="80px"
      size="small"
    >
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input
          v-model="form.oldpassword"
          type="password"
          placeholder="请输入旧密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" label="新密码">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入新密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input
          v-model="form.repassword"
          type="password"
          placeholder="请再次输入新密码"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>

<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { useRepassword, useLogout } from '~/composables/useManager'

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { useFullscreen } from '@vueuse/core'
import { Fold,User } from '@element-plus/icons-vue'

const {
  // 是否全屏状态
  isFullscreen,
  // 切换状态
  toggle
} = useFullscreen()

const { formDrawerRef, formRef, form, onSubmit, rules, openRepasswordForm } =
  useRepassword()

const { hadleLogout } = useLogout()

// 刷新
const handleRefresh = () => location.reload()

// 引用抽屉模板部分
// const formDrawerRef = ref(null)

const hadleCommand = (command) => {
  switch (command) {
    case 'logout':
      hadleLogout()
      break
    case 'rePassword':
      // router.push('/manager/rePassword')
      console.log('修改密码')
      // showDrawer.value = true
      // formDrawerRef.value.open()
      openRepasswordForm()
      break
  }
}

</script>
<style>
.f-header {
  @apply flex items-center bg-indigo-700 text-purple-50 fixed top-0 left-0 right-0;
  height: 64px;
  z-index: 1;
}

/* 设置logoo样式 */
.log {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

/* 设置图标样式 */
.icon-btn {
  @apply flex justify-center items-center;
  width: 42px;
  height: 64px;
  cursor: pointer;
}
.icon-btn:hover {
  @apply bg-indigo-600;
}

/* 退出登录下拉菜单 */
.f-header .dropdown {
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
}
</style>
